{% extends "scrum/base.html" %}
{%load static%}



{% block content %}

    <!-- 内容 -->

    <h1>项目：{{product.product}}</h1>

    <div>项目码： {{product.product_code}}</div>

    <div>主要负责人：{{product.master}}</div>

    <p> 注：
      <span style="color: red;">颜色</span>表示任务过期
      |
      <span style="color: #ff6347;">颜色</span>表示项目距离完成不到24小时
      |
      <span style="color: green;">颜色</span>表示项目距离交付不到3天
    </p>

    <div>
      <table class="table table-hover align-middle text-nowrap">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">分项任务</th>
            <th scope="col">分项负责人</th>
            <th scope="col">计划时间</th>
            <th scope="col">完成度</th>
            <th scope="col">完成时间</th>
            <th scope="col">状态</th>
          </tr>
        </thead>
        <tbody>

          {% for product_backlog in get_product_backlog_by_product_id %}
          
          <!-- <tr title="{{product_backlog.goal}}"> -->

            {% if product_backlog.status == 0 %}

              <tr title="{{product_backlog.goal}}" style="color: red;">

              {% elif product_backlog.status == 1 %}

              <tr title="{{product_backlog.goal}}" style="color: #ff6347;">

              {% elif product_backlog.status == 3 %}
              
              <tr title="{{product_backlog.goal}}" style="color: green;">

              {% else %}
              
              <tr title="{{product_backlog.goal}}">

              {% endif %}



            <th scope="row">{{product_backlog.id}}</th>
            <td>{{product_backlog.product_backlog}}</td>
            <td>{{product_backlog.responsible}}</td>
            <td>{{product_backlog.start_date}} 到 {{product_backlog.end_date}}</td>
            <td>

              <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="showSprintBacklogs({{product_backlog.id}})">
                {{product_backlog.sprint_backlog_count_success_count}}/{{product_backlog.sprint_backlog_count}}
              </button>

            </td>

            <td>{{product_backlog.completion_date}}</td>

            <td>


                {% if product_backlog.operation == 0 %}
                撤销

                {% elif product_backlog.operation == 1 %}

                等待
               
                {% elif product_backlog.operation == 2 %}
                
                进行中
                

                {% elif product_backlog.operation == 3 %}
                
                完成
                {% endif %}

            </td>
          </tr>

          {% endfor %}

        </tbody>
      </table>



      <!-- 分项任务详情 -->
      <!-- Modal -->
      <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">分项任务详情</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

              <p> 注：
                <span style="color: red;">颜色</span>表示任务过期
                |
                <span style="color: #ff6347;">颜色</span>表示项目距离完成不到24小时
                |
                <span style="color: green;">颜色</span>表示项目距离交付不到3天
              </p>

              <table class="table align-middle">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">任务</th>
                    <th scope="col">计划时间</th>
                    <th scope="col">完成时间</th>
                    <th scope="col">状态</th>
                  </tr>
                </thead>

                <tbody id="div1">


                  <!-- <tr>
                    <th scope="row">1</th>
                    <td>3D 模型设计</td>
                    <td>2022-07-03 到 2022-07-03</td>
                    <td>未完成</td>
                    <td>
                      <select class="form-select" aria-label="Default select example">
                        <option value="1" selected>等待</option>
                        <option value="3">完成</option>
                        <option value="4">撤销</option>
                      </select>
                    </td>
                  </tr> -->



                </tbody>
              </table>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容 end -->

{% endblock %}


{% block script %}    

<script>
  function showSprintBacklogs(product_backlog_id){


    var sb_url = "/api/get_sb_html/" + product_backlog_id

    $("#div1").load(sb_url)



  }

//   $(document).ready(function(){
// 	$("button").click(function(){
// 		$("#div1").load("/try/ajax/demo_test.txt");
// 	});
// });
</script>




{% endblock %}

     